<template>
  <view class="container">
    <VenueDetail 
      :venue="venue"
      @book="handleBook"
    />
  </view>
</template>

<script>
import VenueDetail from '@/components/VenueDetail.vue';
import { getVenueDetail } from '@/common/request.js';
import { Venue } from '@/common/models.js';

export default {
  components: {
    VenueDetail
  },
  data() {
    return {
      venueId: 0,
      venue: new Venue()
    };
  },
  onLoad(options) {
    if (options.id) {
      this.venueId = parseInt(options.id);
      // 根据ID加载场地详情
      this.loadVenueDetail();
    }
  },
  methods: {
    async loadVenueDetail() {
      try {
        const data = await getVenueDetail(this.venueId);
        // 转换数据模型
        this.venue = new Venue(data);
      } catch (error) {
        console.error('加载场地详情失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    handleBook(bookingInfo) {
      // 处理预订事件
      console.log('预订信息:', bookingInfo);
      
      // 这里应该跳转到预订确认页面或直接调用预订接口
      uni.showToast({
        title: '预订功能待实现',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.venue-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.venue-name {
  font-size: 36rpx;
  font-weight: bold;
  color: $uni-color-title;
  display: block;
  margin-bottom: 10rpx;
}

.venue-rating {
  font-size: 28rpx;
  color: $uni-color-warning;
}

.venue-info {
  background-color: $uni-bg-color-grey;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
}

.info-item {
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  font-weight: bold;
}

.value {
  color: $uni-text-color-grey;
}

.facility-tags {
  display: flex;
  flex-wrap: wrap;
}

.facility-tag {
  padding: 5rpx 15rpx;
  background-color: white;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.date-selector {
  margin-bottom: 30rpx;
  text-align: center;
}

.date-display {
  display: inline-block;
  padding: 10rpx 30rpx;
  background-color: $uni-bg-color-grey;
  border-radius: 8rpx;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.time-slot {
  padding: 20rpx 10rpx;
  text-align: center;
  border-radius: 8rpx;
  background-color: $uni-bg-color-grey;
  
  &.free {
    background-color: $uni-color-success;
    color: white;
    font-weight: bold;
  }
  
  &.selected {
    background-color: $uni-color-primary;
    color: white;
  }
}

.action-section {
  text-align: center;
}

.book-button {
  width: 80%;
  padding: 20rpx;
  background-color: $uni-color-primary;
  color: white;
  border-radius: 8rpx;
  
  &[disabled] {
    background-color: $uni-bg-color-grey;
    color: $uni-text-color-disable;
  }
}
</style>